<template>
    <div class="lodinbox">
        <back></back>
        <h2>登录账号</h2>
        <div class="dlbox">
            <div class="ys" @click="inputchange=!inputchange">
                    <span @click="inputchange=false" :class="{'dlactive':inputchange==true}">手机号登录</span>
                    <span @click="inputchange=true" :class="{'dlactive':inputchange==false}">邮箱登录</span>
            </div>
            <div class="phonelogin">
                <input type="text" :placeholder="inputchange==true?'请输入手机号码':'请输入邮箱'" v-model="zh">
                <input :type="see==true?'password':'text'" :placeholder="cw==true?'密码错误':'请输入密码'" v-model="mm" :class="{'mmcw':cw==true}" @click="yuanyang">
                <svg class="icon" aria-hidden="true" @click="see=!see">
                    <use :xlink:href="see==true?'#icon-yanjing-biyan':'#icon-yanjing-zhengyan'"></use>
                </svg>
            </div>
            <div class="btbox">
                <button class="denglu" @click="denglu">登录</button>
                <button class="zhuce" @click="zhuce">注册</button> 
            </div>        
            <p @click="wj" class="wjmm">忘记密码?</p>
        </div>
        <div class="leftyuan">泠</div>
        <div class="topyuan">泠</div>
        <div class="dling" v-show="dling">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-loading"></use>
            </svg>
            <div>正在登录中……</div>
        </div>
        <div class="wlbj" v-show="wlbj">
            网络好像出现了问题……
            <p><span @click="denglu">重新登录</span><span @click="qxdl">密码错误</span></p>
        </div>
    </div>
</template>
<script>
import back from "../sosmall/reback.vue"
export default {
    name:'login',
    components:{
        back
    },
    data(){
        return{
            inputchange:true,
            see:true,
            zh:'',
            mm:'',
            dling:false,
            wlbj:false,
            cw:false,
        }
    },
    watch:{
        "inputchange"(){
            this.zh = ''
            this.mm = ''
        }
    },
    beforeRouteEnter(to,from,next){
        let _token = localStorage.getItem('_token')
        // 判断
        if(_token !== null){
            next({path:'/center'});
        }
        else {
            next();
        }
    },
    methods:{
        wj(){
            // localStorage.setItem("_token",269187252)
            // this.$router.push({path:'/center'})
        },
        yuanyang(){
            this.cw = false
        },
        qxdl(){
            this.zh = ''
            this.mm = ''
            this.dling = false
            this.wlbj = false
            this.cw = true
        },
        denglu(){
            this.dling = true
            this.wlbj = false
            if(this.inputchange){
                axios.post(`https://apis.netstart.cn/music/login/cellphone?phone=${this.zh}&password=${this.mm}`).then(
                    res=>{
                        // console.log(res)
                        if(res.data.code == 200){
                            let id = res.data.account.id
                            this.dling = false
                            this.wlbj = false
                            localStorage.setItem("_token",id)
                            this.$router.push({path:'/center'})
                        }else if(res.data.code == 502){
                            this.cw = true
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }else if(res.data.code == 400){
                            alert("账户不存在")
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }else{
                            console.log("你输入了个啥")
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }
                    },
                    err=>{
                        this.dling = false
                        this.wlbj = true
                        if(err == 'Error: Request failed with status code 406'){
                            console.log("接口又双叒叕不行了了")
                        }else if(err == 'Error: Request failed with status code 509'){
                            console.log("没流量啦！快点充钱呀！")
                        }else{
                            console.log(err)
                        }
                    }
                )
            }else{
                axios.post(`https://apis.netstart.cn/music/login/cellphone?email=${this.zh}&password=${this.mm}`,
                {
                    headers: {
                        'Content-Type':'application/json'
                    }
                }
                ).then(
                    res=>{
                        if(res.data.code == 200){
                            let id = res.data.account.id
                            this.dling = false
                            this.wlbj = false
                            localStorage.setItem("_token",id)
                            this.$router.push({path:'/center'})
                        }else if(res.data.code == 502){
                            this.cw = true
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }else if(res.data.code == 400){
                            alert("账户不存在")
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }else{
                            console.log("你输入了个啥")
                            this.dling = false
                            this.wlbj = false
                            this.zh=''
                            this.mm = ''
                        }
                    },
                    err=>{
                        this.dling = false
                        this.wlbj = true
                        if(err == 'Error: Request failed with status code 406'){
                            console.log("接口又双叒叕不行了了")
                        }else if(err == 'Error: Request failed with status code 509'){
                            console.log("没流量啦！快点充钱呀！")
                        }else{
                            console.log(err)
                        }
                    }
                )
            }
        },
        zhuce(){
            this.$router.push({path:'/register'})
        }
    }
}
</script>
<style lang="less" scoped>
.wjmm{
    z-index: 50;
}
.dling{
    position: absolute;
    top: 52%;
    left: 50%;
    color: rgb(163,163,163);
    letter-spacing:0.15rem;
    margin: 0px;
    display: flex;
    justify-content: center;
    z-index: 100;
    transform: translate(-50%,-50%);
    background-color: white;
    padding: 20px;
    width: 200px;
    border-radius: 10px;
    height: 80px;
    svg{
        font-size: 1.5rem;
        animation: donghua 2s linear infinite;
        transform-origin: center center;
        margin-top: 25px;
    }
    div{
        font-size: 1rem;
        line-height: 1.5rem;
        padding-left: 10px;
        background-color: white;
        line-height: 80px;
    }
}
.wlbj{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    color: #717070;
    height: 150px;
    line-height: 40px;
    text-align: center;
    padding: 25px;
    background-color: white;
    font-size: 1.1rem;
    p{
        display:flex;
        justify-content: space-between;
        margin-top: 30px;
        span{
            display:inline-block;    
            font-size: 0.9rem;
            width: 64px;
            padding: 5px;
            color:  #6b6bdab8;
            // border: 1px solid;
            border-radius: 10px;
            // background-color: yellow;
        }
    }
}

h2{
    margin-top: 150px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    text-shadow: 1px 1px 1px #bbb;
}
.lodinbox{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: rgba(120, 172, 241, 0.575);
}
.dlbox{
    width: 60%;
    margin: 20px auto;
    position: relative;
    border-radius: 10px;
    padding: 40px;
    background-color: white;
    border: 1px solid #ccc;
    .ys{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        span{
            color:rgb(163,163,163);
            // display: inline-block;
        }
    }
    p{
        margin: 0px;
        position: absolute;
        bottom: 3%;
        right: 5%;
        font-size: 0.8rem;
        color: #555;
    }
}
.phonelogin{
    position: relative;
    input{
        width: 90%;
        outline: none;
        border: 1px solid #eee;
        // background-color: #eef;
        margin-bottom: 20px;
        border-radius: 50px;
        // margin-bottom: 10px;
        padding: 10px;
        background: #a3a3a30a;
        &::-webkit-input-placeholder{
            color:#a3a3a3;
        }
    }
    svg{
        position: absolute;
        bottom: 20%;
        right: 5%;
        font-size: 1.5rem;
    }
}
.leftyuan{
    position: absolute;
    /* top: 35%; */
    font-size: 15rem;
    top: -12%;
    left: -4%;
    border-radius: 50%;
    color: #ffffff59;
}
.topyuan{
    color: #ffffff29;
    font-size: 12rem;
    /* width: 25rem; */
    /* height: 25rem; */
    /* background-color: #2179ec88; */
    position: absolute;
    bottom: -6%;
    right: -3%;
    border-radius: 50%;
}
.dlactive{
    color: #5893e2 !important;
    position: relative;
    font-weight: 600;
    &::after{
        content:'';
        width: 100%;
        height: 2px;
        background-color: #5893e2;
        position: absolute;
        bottom: -50%;
        left: 0px;
    }
}
.btbox{
    display: flex;
    margin-top:10px;
    justify-content: space-around;
    width: 100%;
    button{
        border: 1px solid transparent;
        padding: 10px;
        width: 35%;
        color: white;
        font-size: 1.2rem;
        border-radius: 10px;
        font-weight: 600;
        background-color: #eee;
        &:first-child{
            background: #6b6bdab8;
            color: white;
        }
    }
}
.mmcw{
    background-color: #ff00001a !important;
    border: 1px solid red !important;
}
</style>
<style>
@keyframes donghua {
    form {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>